<template>
  <div v-loading="loading">
    <div class="head">
      <div class="app-main-top-box">
        <div class="title">价格管理</div>
        <div>
          <el-button size="medium" round @click="goBack">返回</el-button>
        </div>
      </div>
      <div class="app-main-tips-box">
        <div class="title">
          <i class="el-icon-warning" /> 如果是修改资源的基础价格请前往资源编辑页面，本页面是用于管理资源的动态价格，比如国庆黄金周升价。
        </div>
      </div>
      <div class="select-product">
        <el-form label-suffix="：" :inline="true" label-width="100px" size="small">
          <el-form-item label="当前房型">
            <el-select v-model="form.id" placeholder="请选择">
              <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="基础价格">{{ productInfo.basePrice/100 }}元</el-form-item>
          <el-form-item
            v-if="productInfo.productType===1||productInfo.productType===2"
            label="可用时段"
          >
            <span v-if="productInfo.weekdayLimit">
              <span v-for="(item,index) in weekOptions" :key="index">
                <span v-if="productInfo.weekdayLimit.split(',').includes(item.value)">{{ item.label }}</span>
              </span>
            </span>
            <span v-else>无限制</span>
          </el-form-item>
          <el-form-item
            v-if="productInfo.productType===1||productInfo.productType===2"
            label="可用时间"
          >
            <span
              v-if="productInfo.periodStartTime||productInfo.periodEndTime"
            >{{ productInfo.periodStartTime|minsToHourMins }}~{{ productInfo.periodEndTime|minsToHourMins }}</span>
            <span v-else>00:00~24:00</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="tab">
        <el-tabs v-model="tabName">
          <el-tab-pane label="价格日历" name="calendar" />
          <el-tab-pane label="价格规则" name="rules" />
        </el-tabs>
      </div>
    </div>

    <div class="content app-main-content-box">
      <PriceCalendar v-if="tabName==='calendar'&&productInfo" :product-info="productInfo" />
      <PriceRules v-if="tabName==='rules'&&productInfo" :product-info="productInfo" />
    </div>
  </div>
</template>

<script>
import { getProductManageList } from '../../../api/product'
import PriceCalendar from './PriceCalendar'
import PriceRules from './PriceRules'
export default {
  components: {
    PriceCalendar,
    PriceRules
  },
  props: {
    productId: {
      require: true
    },
    productMode: {
      type: String,
      require: true
    },
    productType: {
      type: String,
      require: true
    },
    shopId: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      // 配置
      weekOptions: [
        {
          label: '周一',
          value: '2'
        },
        {
          label: '周二',
          value: '3'
        },
        {
          label: '周三',
          value: '4'
        },
        {
          label: '周四',
          value: '5'
        },
        {
          label: '周五',
          value: '6'
        },
        {
          label: '周六',
          value: '7'
        },
        {
          label: '周日',
          value: '1'
        }
      ],
      tabName: 'calendar',
      //  状态
      loading: false,
      // 数据
      productList: [],
      productInfo: '',
      form: {
        id: ''
      }
    }
  },
  watch: {
    'form.id'(val) {
      if (val) {
        this.productList.forEach(v => {
          if (val === v.id) {
            this.productInfo = v
          }
        })
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取列表
    initData() {
      const params = {}
      params.pageNum = 1
      params.pageSize = 999
      params.shopId = this.shopId
      params.productType = this.productType
      this.loading = true
      getProductManageList(params)
        .then(res => {
          this.productList = res.data.list
          this.form.id = this.productId
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 返回
    goBack() {
      this.$emit('changeProductMode', { productMode: 'list' })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /*  头部 */
  .head {
    padding: 24px 30px 0;
    border-radius: 5px;
    background-color: #fff;
    /* tab */
    .tab ::v-deep {
      .el-tabs__header {
        margin-bottom: 0;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
      }
      .el-tabs__nav-wrap::after {
        background-color: #fff;
      }
      .el-tabs__active-bar {
        height: 4px;
      }
    }
  }

  /* 资源切换 */
  .select-product {
    margin-top: 20px;
  }

  /* 内容 */
  .content {
    margin-top: 10px;
  }
</style>
